<div id="ajax_update">
  <g:hasErrors bean="${status}">
    <div class="errors">
      <g:renderErrors bean="${status}" as="list"/>
    </div>
  </g:hasErrors>
  <g:form name="update" method="post">
    <g:textArea name="message" value="${status?.message}"
        autocomplete="off" onkeyup="updateCounter()"></g:textArea><br/>
    <div class="clear span-22">
      <g:submitToRemote name="updateSubmit" value="update"
          url="[action:'update']" onSuccess="updateAfter(e)"
          before="this.disabled = true;" after="this.disabled = false;"/>
    </div>
    <div id="counter" class="span-3 counter">
    </div>
  </g:form>
  <g:if test="${flash.message}">
    <div id="flash_message" class="clear message">${flash.message}</div>
    <g:javascript>
      setTimeout(function() {
        new Effect.Fade('flash_message')
      }, 3000)
    </g:javascript>
  </g:if>
  <g:javascript>
    function updateCounter() {
      remain = 140 - $('message').value.length
      $('counter').innerHTML = remain
      if (remain < 0) {
        $('counter').style.color = '#f00'
      }
      else {
        $('counter').style.color = '#aaa'
      }
    }

    // つぶやきの結果をJSONでもらい，主要画面(main)とつぶやき総数(count)を
    // 更新するようにしてみた。
    function updateAfter(e) {
      $("ajax_update").update(e.responseJSON.main)
      $("stat_count").update(e.responseJSON.count)
    }
  </g:javascript>
  <hr>
  <g:render template="ajax_timeline" model="[timelines:timelines,username:username,page:page]"/>
</div>
